<template>
    <div class="home" >
        <div ref="maine" style="width: 100%;height: 500%;" ></div>
    </div>
</template>

<script>
    // 使用echart的3d功能需要另外安装echarts-gl  安装指令： cnpm install echarts-gl
    import 'echarts-gl'
    const worl = require('@/json/world.json')
    export default {
        name: "UserManage",
        data () {
            return {
                chinachart: null
            }
        },
        mounted () {
            // 初始化echarts实例

            this.chinachart = this.$echarts.init(this.$refs.maine)
            function getAirportCoord (idx) {
                return [worl.airports[idx][3], worl.airports[idx][4]]
            }
            var routes = worl.routes.map(function (airline) {
                return [
                    getAirportCoord(airline[1]),
                    getAirportCoord(airline[2])
                ]
            })

            const option = {
                backgroundColor: '#000',
                globe: {
                    // 需要引入的两张图片
                    baseTexture: 'img/world.topo.bathy.200401.jpg',
                    heightTexture: 'img/bathymetry_bw_composite_4k.jpg',
                    shading: 'lambert',
                    light: {
                        ambient: {
                            intensity: 0.4
                        },
                        main: {
                            intensity: 0.3
                        }
                    },
                    viewControl: {
                        autoRotate: false
                    }
                },
                series: {
                    type: 'lines3D',
                    coordinateSystem: 'globe',
                    blendMode: 'lighter',
                    lineStyle: {
                        width: 1,
                        color: 'rgb(100, 20, 200)',
                        opacity: 0.2
                    },
                    data: routes
                }
            }

            this.chinachart.setOption(option)
        }
    }
</script>

<style scoped>
    .home{
        height: 100%;
        width: 100%;
    }
</style>